<script setup lang="ts">
import { h } from "vue";
import { ElButton } from "element-plus";
import DialogAgreement from "./compontents/DialogAgreement.vue";

import ApiContent from "@/api/content";
import useModal from "@/hooks/useModal";
import useProTable from "@/hooks/useProTable";

const [Modal, modalApi] = useModal({
  title: "编辑",
  width: "800",
});

const columns = [
  { label: "协议介绍", prop: "title" },
  {
    label: "操作",
    width: 120,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          plain: true,
          type: "primary",
          onClick: () => modalApi.open(row),
        },
        "编辑"
      ),
  },
];

const [ProTable, { tableApi }] = useProTable({
  showPages: false,
  fetchUrl: ApiContent.getInfoList,
  fetchOptions: {
    defaultSearch: { category: 1 },
  },

  tableOptions: {
    columns,
  },
});
</script>

<template>
  <ProTable />

  <Modal>
    <DialogAgreement @success="tableApi.refresh()" />
  </Modal>
</template>
